<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">待产订单汇总</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<view style="height: 138upx;" class="padding-tb-20 padding-lr-30">
			<view class="search-fixed bg-blue" :style="{marginTop: CustomBar + 'px'}">
				<!-- 时间选择器 -->
				<view class="flex align-center date-select u-font-weight6 bg-blue">
					<picker mode="date" :value="date" start="1970-01-01" @change="DateChange">
						<view class="picker">
							{{date}}
						</view>
					</picker>
					<text class="ph-sousuoshijian position-text text-blue"></text>
				</view>
			</view>
		</view>
		<!-- 主题内容 -->
		<view  class="padding-t">
			<view class="public-main-info">
				<view class="u-main">
					<!-- 下面表格 -->
					<view class="padding2030">
						<view class="u-table">
							<view class="">
								<view class="u-table-head">
									<view class="u-table-head-item u-font-weight" v-for="(item, index) in tableHeads" :key="index">{{item.name}}</view>
								</view>
								<view>
									<!-- class="u-table-bady-height" -->
									<scroll-view scroll-y="true" :style="{height: uHeight + 'px'}" @scrolltolower="lower">
										<view class="u-table-bady-column" v-for="(item, indexs) in tableData" :key="indexs">
											<view class="u-table-head-item">{{item.orderNo}}</view>
											<view class="u-table-head-item">{{item.steelType}}</view>
											<view class="u-table-head-item">{{item.thicknessRange}}</view>
											<view class="u-table-head-item">{{item.widthRange}}</view>
											<view class="u-table-head-item">{{item.orderOutput}}</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
						<view class="text-center" v-show="flag">
							{{info}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import { post, getTime } from "@/lib/Util.js";
	import {GET_DAI_ORDER_INFO} from '@/common/api/order.js'
	export default {
		data() {
			return {
				flag: false,
				loading: false,
				info: '',
				pageIndex: 1,
				pageSize: 10,
				flagIndex: 'dai',
				date: '',
				tableHeads: [
					{
						name: '订单号',
					},
					{
						name: '钢种',
					},
					{
						name: '成品厚度(mm)',
					},
					{
						name: '成品宽度(mm)',
					},
					{
						name: '订单产量(t)',
					}
				],
				tableData: [],
				uHeight: 0
			}
		},
		mounted() {
			this.pageIndex = 1
			this.date = getTime()
			this.getInfo()
			var len = 0
			uni.getSystemInfo({
				success: function (res) {
					console.log(res.windowHeight)
					len = res.windowHeight
				}
			})
			this.uHeight = len - this.CustomBar - 40 - 77 - 54 - 40
		},
		methods: {
			DateChange(e) {
				this.date = e.detail.value
				this.getInfo()
			},
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getInfo() {
				let res = await post(GET_DAI_ORDER_INFO, {
					time: this.date,
					page: this.pageIndex,
					size: this.pageSize
				})
				if(res.code == 0) {
					if(res.data.length == 0) {
						this.info = '已经到底了'
					}else {
						this.tableData = this.tableData.concat(res.data)
						this.flag = false
					}
					if(this.tableData.length == 0) {
						this.info = '暂无数据'
					}
				}
			},
			lower(e) {
				if (e.target.direction == "bottom") {
					this.flag = true
					this.info = '加载中……'
					++this.pageIndex
					this.getInfo()
				}
			}
		}
	}
</script>

<style>
	.loading-info {
		text-align: left;
		padding-left: 220upx;
		margin-top: 20upx;
	}
</style>
